<template>
    <div id="all">

        <top></top>
        <!-- <div id="cu_img">
            <image src="../assets/image/出租保险1.jpg" class="cu_image"></image>
        </div> -->
        <!--头部图片-->
        <div id="cu_img">
            <img src="../../assets/image/chuzu1.jpg" alt="" class="cu_img2">
        </div>


        <div id="cu_center">
            <div class="cu_center_one">
                <div class="cu_one_left">
                    <p class="cu_one_p">
                        <span class="cu_one_span">适用范围：</span>
                        <span class="cu_one_sp">钢混或砖混结构的住宅</span>
                    </p>
                    <p class="cu_one_p">
                        <span class="cu_one_span">保险期限：</span>
                        <span class="cu_one_sp">1年</span>
                    </p>
                    <p class="cu_one_p">
                        <span class="cu_one_span">销售范围：</span>
                        <span
                            class="cu_one_sp">中国大陆（除下列地区）四川达州、四川广安、四川凉山、四川雅安、四川阿坝州、四川甘孜、四川巴中、内蒙古通辽、内蒙古呼伦贝尔、内蒙古锡林郭勒盟、吉林四平、吉林辽源、吉林通化、吉林白山、吉林白城、浙江宁波、香港、澳门、台湾,
                            重庆市巫溪县</span>
                    </p>
                    <p class="cu_one_p">
                        <span class="cu_one_span">保单形式：</span>
                        <span class="cu_one_sp">电子保单、纸质保单</span>
                    </p>
                    <p class="cu_one_p">
                        <span class="cu_one_span">保险责任：</span>
                        <span class="cu_one_spp">请阅读
                            <a href="##" class="cu_one_a">《出租无忧家居保险适用条款》</a>
                            ,并敬请特别留意条款中的"责任免除" "释义"部分。
                        </span>
                    </p>
                </div>
                <div class="cu_one_right">

                    <p class="cu_one_price">
                        ￥
                        <span class="price_span">100</span>
                        起
                    </p>

                    <p class="cu_one_item">
                        <a href="##" class="cu_item_a" @click="insure">立刻投保</a>
                    </p>
                </div>
            </div>

            <div class="cu_center_one">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <div class="demo_div">
                        <el-tab-pane label="产品特色" name="first" class="demo_label">
                            <div class="cu_first">
                                <img src="../../assets/image/chuzu2.jpg" alt="" class="cu_first2">
                            </div>
                        </el-tab-pane>
                    </div>


                    <el-tab-pane label="保障计划" name="second">
                        <div class="cu_second">
                            <div class="cu_second_table">
                                <div class="cu_second_tabs">
                                    <el-tabs type="border-card">
                                        <el-tab-pane label="保障计划">
                                            <el-table :data="tableData" border style="width: 100%"
                                                class="cu_second_column">
                                                <el-table-column prop="date" label="保障计划" width="180" />
                                                <el-table-column prop="name" label="保障项目" width="180" />
                                                <el-table-column prop="address" label="保额" />
                                            </el-table>
                                        </el-tab-pane>
                                        <el-tab-pane label="保障详情解读">
                                            <el-table :data="tableData" border style="width: 100%"
                                                class="cu_second_column">
                                                <el-table-column prop="date" label="保障计划" width="180" />
                                                <el-table-column prop="name" label="保障项目" width="180" />
                                                <el-table-column prop="address" label="保障解读" />
                                            </el-table>
                                        </el-tab-pane>
                                    </el-tabs>
                                </div>
                            </div>

                            <div class="cu_second_p">
                                <p class="cu_second_p1">特别声明</p>
                                <p class="cu_second_p2">1、本保险不承保由地震、海啸造成的房屋损失。</p>
                                <p class="cu_second_p2">2. 本保险不承保村房、农民房等小产权房或用于生产经营的房屋。</p>
                            </div>

                            <div class="cu_second_p">
                                <p class="cu_second_p3">隐私保护声明</p>
                                <p class="cu_second_p2">1、本保险不承保由地震、海啸造成的房屋损失。</p>
                                <p class="cu_second_p2">2. 本保险不承保村房、农民房等小产权房或用于生产经营的房屋。</p>
                            </div>

                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="投保须知" name="third">
                        <div class="cu_third">
                            <dl class="cu_third_dl">
                                <dd>
                                    <span>1、本产品适用于砖混及钢混结构且有合法物业管理的居所，<d>不适用</d>生产经营的房屋。</span>
                                </dd>
                                <dd>
                                    <span>2、本产品适用于砖混及钢混结构且有合法物业管理的居所。</span>
                                </dd>
                            </dl>

                            <p class="cu_third_p">投保人声明:</p>

                            <dl class="cu_third_dl">
                                <dd>
                                    <span>1、本产品适用于砖混及钢混结构且有合法物业管理的居所，<d>不适用</d>生产经营的房屋。</span>
                                </dd>
                                <dd>
                                    <span>2、本产品适用于砖混及钢混结构且有合法物业管理的居所。</span>
                                </dd>
                            </dl>

                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="常见问题" name="fourth">
                        <div class="cu_fourth">
                            <ul class="cu_fourth_ul">
                                <li class="cu_fourth_li">
                                    <p class="cu_fourth_p cu_p_one">
                                        <el-icon :size="15" :color="color">
                                            <ChatDotRound />
                                        </el-icon>

                                        <span>如何填写房屋保险金额？</span>
                                    </p>
                                    <p class="cu_fourth_p">
                                        <el-icon :size="10" :color="color">
                                            <UserFilled />
                                        </el-icon>

                                        <span>家庭财产保险采用第一危险赔偿方式，即在保险金额的限度以内所遭受的保险事故，保险公司都认为是足额投保的，这一点同车险有着巨大区别；简单的说，就是损失多少赔偿多少，但不能超出保险额度。因此，用户在填写家财险保额时，可以根据实际的风险情况自由填写。一般来说，门窗、管线、配电箱、冷暖机组相对房屋的主体结构更容易受损，其价值占房屋购置价的10-20%，用户可以此为参考填写房屋保额。</span>
                                    </p>
                                </li>
                                <li class="cu_fourth_li">
                                    <p class="cu_fourth_p cu_p_one">
                                        <el-icon :size="15" :color="color">
                                            <ChatDotRound />
                                        </el-icon>
                                        <span>如何填写房屋保险金额？</span>
                                    </p>
                                    <p class="cu_fourth_p">
                                        <el-icon :size="10" :color="color">
                                            <UserFilled />
                                        </el-icon>
                                        <span>家庭财产保险采用第一危险赔偿方式，即在保险金额的限度以内所遭受的保险事故，保险公司都认为是足额投保的，这一点同车险有着巨大区别；简单的说，就是损失多少赔偿多少，但不能超出保险额度。因此，用户在填写家财险保额时，可以根据实际的风险情况自由填写。一般来说，门窗、管线、配电箱、冷暖机组相对房屋的主体结构更容易受损，其价值占房屋购置价的10-20%，用户可以此为参考填写房屋保额。</span>
                                    </p>
                                </li>
                            </ul>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>

            <div class="cu_center_one">
                <img src="../../assets/image/chuzu4.jpg" alt="" class="cu_zhuxu4">
            </div>
        </div>

        <!-- 底部组件 -->
        <ButtonState></ButtonState>

    </div>
</template>

<script>
// import DetailsItem from "./DetailsItem.vue"
import top from "../../components/TopNav.vue"
import ButtonState from "../../components/ButtonState.vue";
import http from "../../http/request"
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
    name: 'Details',

    data() {
        return {
            activeName: "first",
            tableData: [
                {
                    date: '2016-05-03',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2016-05-02',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2016-05-04',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2016-05-01',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
            ],

        };
    },

    mounted() {

        let id = this.$route.query.id;
        console.log("id=" + id)

        http.get("goods/goods/" + id).then((response) => {
            console.log(response)
        })
    },

    methods: {
        insure() {
            if (this.$store.state.token == '') {


                this.$router.push({
                    path: 'login'
                })
            } else {
                console.log(this.$store.state.token)
            }
        }


    },

    components: {
        top,
        ButtonState
    }
};
</script>

<style lang="css" scoped>
#all {
    /* border: 1px solid red; */
    /* height: 1000px; */
    max-width: 2560px;
    width: 100%;
    margin: auto;

}

#cu_img {
    height: 400px;
    width: 100%;
    /* border: 1px solid black; */
    /* background: url(../../assets/image/chuzu1.jpg); */
    /* background-size: 100% 100%;
    background-repeat: no-repeat; */
}

.cu_img2 {
    /* border: #f05a23 1px solid; */
    height: 100%;
    width: 100%;
}

/* .cu_image{
    display: flex;
    height: 100%;
    width: 100%;
    border: 1px solid gold;
} */

/* 中间 */
#cu_center {
    background-color: #f6f6f6;
    padding-top: 50px;
}

.cu_center_one {
    width: 80%;
    margin: auto;
    /* height: 200px; */
    background-color: white;
    /* border: 1px solid #03a9f4; */
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    border-radius: 20px;
    box-shadow: 0 0 15px rgb(0 0 0 / 15%);
    margin-top: 50px;
}

.cu_one_left {
    width: 70%;
    height: 100%;
    /* border: 1px solid red; */
    float: left;
    padding: 10px 0px 24px 30px;
    border-right: 1px dashed #eaeaea;
    font-size: 16px;
    color: #6c6060;
}

.cu_one_right {
    width: 30%;
    height: 100%;
    /* border: 1px solid red; */
}

.cu_one_p {
    float: left;
    box-sizing: border-box;
}

.cu_one_span {
    color: #333;
    font-weight: bold;
    vertical-align: top;
}

.cu_one_sp {
    display: inline-block;
    width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

/* .cu_one_spp {} */

.cu_one_a {
    color: #2e84ca;
}

.cu_one_right {
    text-align: center;
}

.cu_one_price {
    font-size: 20px;
    color: #fe6100;
    font-weight: 700;
    margin-bottom: 30px;
    margin-top: 50px;
}

.price_span {
    font-size: 36px;
    padding: 0 8px;
}

.cu_one_item {
    border-radius: 20px;
    display: inline-block;
    background-color: #fe6100;
    color: #fff;
    height: 36px;
    line-height: 36px;
    width: 138px;
    font-size: 18px;
    background: linear-gradient(270deg, #fba831, #f05a23);
}

.cu_item_a {
    text-decoration: none;
    color: #fff;
}


/* 第二个 */
/* .cu_two {
    border: 1px solid red;
} */

/* .demo_div{
    border: 1px solid rgb(28, 220, 146);
} */
.demo-tabs {
    width: 100%;
    /* border: 1px solid red; */

}

.el-tabs__nav-scroll {
    padding-left: 50px !important;
}

.el-tabs__nav-wrap {
    overflow: hidden;
    margin-bottom: -1px;
    position: relative;
    padding-left: 50px;
}

.cu_first {
    width: 100%;
    height: 1649px;
    /* border: 1px solid rgb(41, 19, 211); */
    /* background: url(../../assets/image/chuzu2.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat; */
}

.cu_first2 {
    height: 100%;
    width: 100%;
}

.cu_third {
    height: 100%;
    width: 100%;
    background-color: #ffeb3b24;
    font-size: 10px;
    line-height: 25px;
    color: #000000ba;
}

.cu_third_p {
    margin-left: 40px;
    font-weight: bold;
    line-height: 5px;
}

/* .cu_second_column {} */

.cu_second_column .el-table .cell {
    text-align: center !important;
}

.cu_second_p {
    padding: 20px 0px 20px 30px;
}

.cu_second_p1 {
    background-color: #f80;
    width: 100px;
    text-align: center;
    color: wheat;
    border-end-start-radius: 10px;
    border-start-end-radius: 10px;
    line-height: 25px;
    font-size: 16px;
}

.cu_second_p2 {
    font-size: 13px;
    line-height: 10px;
    color: #2f2e2c;
}

.cu_second_p3 {
    background-color: #f80;
    width: 130px;
    text-align: center;
    color: wheat;
    border-end-start-radius: 10px;
    border-start-end-radius: 10px;
    line-height: 25px;
    font-size: 16px;
}

.cu_fourth {
    padding: 20px 20px 10px 20px;
    background-color: #ff98001c;
}

.cu_fourth_ul {
    display: contents;
}

.cu_fourth_li {
    list-style: none;
    margin-bottom: 10px;
    padding: 1px 0 2px 20px;
    background-color: #fff;
    border-radius: 20px;
}

.cu_fourth_p {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    font-size: 5px;
    justify-content: flex-start;
    font-weight: lighter;
}

.cu_p_one {
    font-size: 10px;
    color: #000;
}

.cu_zhuxu4 {
    width: 100%;
    height: 100%;
}
</style>